<template>
    <div class="right"> 
        <h3>会员管理</h3>
        <table border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>电影名称</th>
                    <th>价格</th>
                    <th>上映时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item) in arr" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price|filterPrice}}</td>
                    <td>{{item.time|filterTime}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    
</template>
<script>

export default {
    
    data(){
        return {
            arr: [
                    {
                        id: 1,
                        name: '姜子牙',
                        price: 30.00,
                        time: 1607928388132
                    },
                    {
                        id: 2,
                        name: '我和我的祖国',
                        price: 45.00,
                        time: 1307928388132
                    },
                    {
                        id: 3,
                        name: '我和我的家乡',
                        price: 32.10,
                        time: 1407928388132
                    }
                ]
        }
    },
    filters:{
        filterPrice(p){
            return p.toFixed(2);
        },
        filterTime(t){
            let d = new Date(t);
            let year = d.getFullYear();
            let month = (d.getMonth() + 1 + '').padStart(2, '0'); 
            let date = (d.getDate() + '').padStart(2, '0');
            let hours = (d.getHours() + "").padStart(2, '0')
            let minutes = (d.getMinutes() + "").padStart(2, '0')
            let seconds = (d.getSeconds() + "").padStart(2, '0')

            return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
        }
    }
};
</script>
<style>

.right h3{
    margin: 10px;
    text-align: center;
    color: blue;
    line-height: 30px;
}
.right table{
    width: 1200px;
    margin-left: 100px;
    text-align: center;
}
.right table td{
    height: 50px;
    
}
</style>